<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .infinite-list {
            height: 300px;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="app">

    <div class="infinite-list">
        <!--
            busy的控制一定要有， 否则只触发一次滚动加载，或者无限滚动
            距离底部100px时开始加载
         -->
        <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="100">
            <div v-for="item in data" :key="item.index">{{item.name}}</div>
        </div>
    </div>

</div>
</body>


<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                count: 0,
                data: [],
                busy: false
            }
        },
        mounted() {

        },
        created() {

        },
        methods: {
            loadMore() {
                this.busy = true
                setTimeout(() => {
                    for (var i = 0, j = 10; i < j; i++) {
                        this.data.push({name: this.count++})
                    }
                    console.log(this.data)
                    this.busy = false
                }, 1000)
            }
        }
    })
</script>
</html>